<template>
  <div class="adminOrdersList">

    <div class="content">
      <el-row>
        <div class="debug">{{vm.query}}{{vm.meta}}</div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>成交记录列表</el-breadcrumb-item>

        </el-breadcrumb>

      </el-row>
      <el-row :gutter="12">
        <!--todo 响应式-->
        <el-col :span="16">

          <el-select @change="query" style="width:100px" size="small" v-model="vm.query.shop_id" placeholder="选择店铺">
            <el-option
              v-for="item in shops"
              :key="item.id"
              :label="item.shop_name"
              :value="item.id">
            </el-option>

          </el-select>
          <el-date-picker
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </el-col>
        <el-col :span="8">
          <el-input size="small" placeholder="按关键词进行搜索" v-model="vm.query.keyword" class="input-with-select">
            <el-button size="small" @click="query()" slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <el-col :span="3" :offset="5">




        </el-col>
      </el-row>

      <el-table
        :data="vm.models" stripe border style="width: 100%">


        <el-table-column

          prop="id"
          label="#"
          width="30">
        </el-table-column>
        <el-table-column

          prop="create_time"
          label="成交时间"
          >
        </el-table-column>
        <el-table-column
          label="客户头像"
          width="80"
        >
          <template slot-scope="scope">
            <span><img width="60px" :src="scope.row.avatar" alt=""> </span>

          </template>
        </el-table-column>
        <el-table-column
          prop="thread_name"
          label="客户姓名"
          >
        </el-table-column>
        <el-table-column
          prop="thread_phone"
          label="客户电话"


          >

        </el-table-column>
        <el-table-column
          prop="operator_name"
          label="所属合作商"


        >

        </el-table-column>
        <el-table-column
          prop="shop_name"
          label="所属店铺"


        >

        </el-table-column>
        <el-table-column
        prop="model_name"
        label="购买车型">

      </el-table-column>
        <el-table-column
          label="状态">
          <template slot-scope="scope">

            <div v-if="scope.row.service_charge_accept==1">通过</div>
            <div v-if="scope.row.service_charge_accept==0">未通过</div>

            <!--<div v-if="scope.row.formalities_delay_days&&scope.row.formalities_delay_days>0">手续延迟{{scope.row.formalities_delay_days}}天</div>-->
          </template>
        </el-table-column>
        <el-table-column
          prop="first_payment"
          label="首付">

        </el-table-column>
        <el-table-column
          prop="month_supply_1st_year"
          label="首年月供">

        </el-table-column>

        <!--<el-table-column-->
          <!--align="right"-->
          <!--label="操作"-->
          <!--&gt;-->
          <!--<template slot-scope="scope">-->
            <!--<el-button-->
              <!--v-if="scope.row.status==enable"-->
              <!--type="success"-->
              <!--size="mini">-->
              <!--<i class="el-icon-success"></i>-->
            <!--</el-button>-->
            <!--<el-button-->
              <!--v-if="scope.row.status==disable"-->
              <!--type="warning"-->
              <!--size="mini">-->
              <!--<i class="el-icon-error"></i>-->

            <!--</el-button>-->
            <!--<router-link :to="{ name:'staffEdit',params: { id: scope.row.id }}" append>-->
              <!--<el-button size="mini">-->

                <!--编辑-->
              <!--</el-button>-->
            <!--</router-link>-->

            <!--<el-button-->
              <!--@click="delUser"-->
              <!--size="mini"-->
              <!--type="danger">-->
              <!--删除-->
            <!--</el-button>-->
          <!--</template>-->
        <!--</el-table-column>-->
      </el-table>
      <el-pagination
        background
        v-if="!vm.isLoading"
        @current-change="pageChange($event)"
        :page-size="vm.meta.size"
        :current-page="vm.meta.page"
        layout="total,prev, pager, next,jumper"
        :total="vm.meta.total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import Vue from 'vue'
  import * as Models from '@/api/admin_orders'
  import * as Shops from '@/api/shops'

  export default{
    name: "adminOrdersList",
    computed: {

    },

    components: {

    },
    data(){
      return{
        vm:{
          models:[],
          isNull:false,
          isLoading:false,
          isError:false,
          meta:{},
          query:{}
        },
        shops:[]
      }
    },
    computed:{},
    mounted() {
      var that=this;
      this.query({reload:true})
      Shops.query().then(function(res){
        that.shops=res.pass_list;
      })
    },
    methods: {




      query:function(config){

        var that=this;


        if(config&&config.reload){

        }
        that.vm.models=[];
        that.vm.isLoading=true;
//        todo getRoles.then
        Models.query(that.vm.query).then(function(data){
          that.vm.isLoading=false;
          console.log(data);
          if(data.meta){
            that.vm.meta={
              size:data.meta.size*1,
              page:data.meta.page*1,
              total:data.meta.total*1
            };
          }

          that.vm.models= data.models;
//
//          that.$refs['staffTable'].doLayout();
        }).catch(function(){
          that.vm.isLoading=false;
          that.vm.isError=true;
        });
  //      todo 双向绑定底层方法优化性能 -> set
      },
      pageChange:function(e){
        Vue.set(this.vm.query,'page',e)
        this.query({reload:true});
      },


    }

  }
</script>
